<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const tokenStore = useTokenStore()

const goToScriptManagement = () => {
  router.push('/admin/scripts')
}

const goToCategoryManagement = () => {
  router.push('/admin/categories')
}

const goToTagManagement = () => {
  router.push('/admin/tags')
}

const logout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 清除token
    tokenStore.removeToken()
    ElMessage.success('已退出登录')
    
    // 跳转到登录页
    router.push('/login')
  } catch {
    // 用户取消退出
  }
}
</script>

<template>
  <div class="admin-dashboard">
    <div class="dashboard-container">
      <el-card>
        <div class="dashboard-header">
          <h2>管理后台</h2>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
        
        <el-row :gutter="20" class="dashboard-content">
          <el-col :span="8">
            <el-card class="feature-card" @click="goToScriptManagement">
              <div class="feature-content">
                <el-icon size="48" color="#409EFF">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zM668 345.9L621.5 312 572 347.4V124h96v221.9z"/>
                  </svg>
                </el-icon>
                <h3>剧本管理</h3>
                <p>管理剧本信息，包括新增、编辑、删除剧本</p>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card class="feature-card" @click="goToCategoryManagement">
              <div class="feature-content">
                <el-icon size="48" color="#67C23A">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM368 744c0 4.4-3.6 8-8 8h-80c-4.4 0-8-3.6-8-8V280c0-4.4 3.6-8 8-8h80c4.4 0 8 3.6 8 8v464zm240-280c0 4.4-3.6 8-8 8H456c-4.4 0-8-3.6-8-8v-80c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v80zm0-160c0 4.4-3.6 8-8 8H456c-4.4 0-8-3.6-8-8v-80c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v80z"/>
                  </svg>
                </el-icon>
                <h3>分类管理</h3>
                <p>管理剧本分类，包括新增、编辑、删除分类</p>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card class="feature-card" @click="goToTagManagement">
              <div class="feature-content">
                <el-icon size="48" color="#F56C6C">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
                    <path fill="currentColor" d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"/>
                  </svg>
                </el-icon>
                <h3>标签管理</h3>
                <p>管理剧本标签，包括新增、编辑、删除标签</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.admin-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dashboard-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-buttons {
  display: flex;
  align-items: center;
}

.dashboard-header h2 {
  color: #303133;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.dashboard-content {
  margin-top: 20px;
}

.feature-card {
  cursor: pointer;
  transition: all 0.3s ease;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: none;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.feature-content {
  text-align: center;
  padding: 20px;
}

.feature-content h3 {
  margin: 15px 0 10px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.feature-content p {
  color: #606266;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 卡片样式优化 */
:deep(.el-card) {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

:deep(.el-card__body) {
  padding: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-dashboard {
    padding: 10px;
  }
  
  .dashboard-container {
    max-width: 100%;
  }
  
  .dashboard-header h2 {
    font-size: 20px;
  }
  
  .feature-card {
    height: 180px;
  }
  
  .feature-content h3 {
    font-size: 16px;
  }
  
  .feature-content p {
    font-size: 13px;
  }
}
</style> 